import { Component, ViewChild, ElementRef } from '@angular/core'
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular'

import { HttpServicesProvider } from '../../../providers/http-services/http-services'

import { InProductionPage } from '../in-production/in-production'
import { CompletionPage } from '../completion/completion'

declare let Swiper
@IonicPage()
@Component({
  selector: 'page-order-detail',
  templateUrl: 'order-detail.html'
})
export class OrderDetailPage {
  swiper: any
  private slidesHeight: number
  private slidesMoving: boolean
  private screenheight: number = screen.height
  private headerheight: number
  private footerheight: number
  @ViewChild('contentSlides')
  contentSlides: Slides
  customer: any
  orderNumber: any
  menus: Array<string> = ['全部', '在产', '待产', '完成']
  number: Array<number> = [0, 0, 0, 0]
  orderAll: any[] // 所有列表项
  order1: Array<{}> // 在产列表项
  order2: Array<{}> // 待产列表项
  order3: Array<{}> // 完成列表项
  // all:string
  // inProduction:string
  // toBeProduced:string
  // completeProduction:string
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private httpService: HttpServicesProvider,
    public element: ElementRef
  ) {
    this.customer = navParams.get('customer')
    this.orderNumber = navParams.get('item')
    let data = new Object()
    data['companyCode'] = this.customer
    data['orderFlowNumId'] = this.orderNumber
    this.httpService.requestDataPost(
      'app/mesPartialMangement/productState',
      data,
      {},
      (status, datas) => {
        if (status) {
          this.orderAll = datas.productState
          this.order1 = this.orderAll.filter(function(x) {
            return x.partialStatusName === '在产'
          })
          this.order2 = this.orderAll.filter(function(x) {
            return x.partialStatusName === '待产'
          })
          this.order3 = this.orderAll.filter(function(x) {
            return x.partialStatusName === '完成'
          })
          this.number = [
            this.orderAll.length,
            this.order1.length,
            this.order2.length,
            this.order3.length
          ]
        }
      }
    )
  }

  ionViewDidLoad() {
    this.initSwiper()
    this.headerheight = this.element.nativeElement.firstChild.clientHeight
    this.footerheight = this.element.nativeElement.parentNode.parentNode.firstChild.clientHeight
  }

  initSwiper() {
    this.swiper = new Swiper('.pageMenuSlides .swiper-container', {
      slidesPerView: 4,
      spaceBetween: 0,
      breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 0
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 0
        },
        640: {
          slidesPerView: 4,
          spaceBetween: 0
        },
        320: {
          slidesPerView: 4,
          spaceBetween: 0
        }
      }
    })
  }

  selectPageMenu($event, index) {
    this.setStyle(index)
    this.contentSlides.slideTo(index)
  }
  slideChanged() {
    this.slidesMoving = false
    let index = this.contentSlides.getActiveIndex()
    this.setStyle(index)
    let currentSlide: Element = this.contentSlides._slides[index]
    if (currentSlide) {
      this.slidesHeight = currentSlide.clientHeight
      let contentheight =
        this.screenheight - this.headerheight - this.footerheight - 10
      if (currentSlide.clientHeight > contentheight) {
        this.slidesHeight = currentSlide.clientHeight
      } else {
        this.slidesHeight = contentheight
      }
    }
    this.swiper.slideTo(index, 300)
  }

  slideWillChange() {
    this.slidesMoving = true
  }

  setStyle(index) {
    var slides = document
      .getElementsByClassName('pageMenuSlides')[0]
      .getElementsByClassName('swiper-slide')
    if (index < slides.length) {
      for (var i = 0; i < slides.length; i++) {
        var s = slides[i]
        s.className = 'swiper-slide'
      }
      slides[index].className = 'swiper-slide bottomLine'
    }
  }

  itemSelected(item) {
    let params = {
      productionNum: item.productionNum,
      customer: this.customer,
      orderNumber: this.orderNumber
    }
    if (item.partialStatusName === '在产') {
      this.navCtrl.push(InProductionPage, { params })
    } else if (item.partialStatusName === '完成') {
      this.navCtrl.push(CompletionPage, { params })
    } else {
      return
    }
  }
}
